<template>
  <!-- 视频详情 -->
  <div class="vd flex">
    <div class="main-box">
      <video :src="videoSrc" controls></video>
      <div class="info-container">
        <!-- 作者头像与昵称 -->
        <div class="creator-info flex mgt-10">
          <img :src="videoInfo.avatarUrl" alt="">
          <span>{{ videoInfo.creator.nickname }}</span>
        </div>
        <!-- 视频标题 -->
        <div class="mgt-10 font-16 font-bold">{{ videoInfo.title }}</div>
        <!-- 视频发布时间与播放数据 -->
        <div class="mgt-10 font-12">
          <span>发布时间: {{ videoInfo.publishTime | dateFormat }}</span>
          <span class="mgl-20">播放次数:{{ videoInfo.playTime | playtime}}</span>
        </div>
        <!-- 标签 -->
        <div class="mgt-10">
          <span v-for="item in videoInfo.videoGroup" :key="item.id" class="tag">{{ item.name }}</span>
        </div>
      </div>
      <comment-container :queryInfo="queryInfo" :isShowHot="false" class="mgt-20"></comment-container>
    </div>
    <div class="right-box">
      <div class="font-16 font-bold">相关推荐</div>
      <div v-for="item in relatedVideo" :key="item.vid" class="flex related mgt-10 pointer" @click="toVideo(item.vid)">
        <img :src="item.coverUrl" alt="">
        <div class="related-info mgl-12">
          <div class="r-video-title font-14">{{ item.title }}</div>
          <div class="r-video-creator font-12 mgt-20">by &nbsp;{{ item.creator[0].userName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getVideoUrl, getVideoInfo, getRelatedVideo, getVideo } from '@/api/video.js'
import commentContainer from '../../components/Comment/commentContainer.vue'
export default {
  components: { commentContainer },
  data () {
    return {
      videoSrc: '',
      relatedVideo: [],
      videoInfo: {
        avatarUrl: '',
        creator: { nickname: '' },
        title: '',
        publishTime: '',
        playTime: '',
        videoGroup: {}
      },
      // 用于查询评论,id是资源的id,type是资源类型,详情参考文档
      queryInfo: {
        id: this.id,
        type: 5
      }
    }
  },
  methods: {
    async showVideo () {
      const res = await getVideoUrl(this.id)
      if (res.data.code !== 200) return this.$message.error('获取视频失败')
      this.videoSrc = res.data.urls[0].url
    },
    async showVideoInfo () {
      const res = await getVideoInfo(this.id)
      if (res.data.code !== 200) return this.$message.error('获取视频信息失败')
      // console.log(res)
    },
    async showRelatedVideo () {
      const res = await getRelatedVideo(this.id)
      if (res.data.code !== 200) return this.$message.error('获取相关视频信息失败')
      this.relatedVideo = res.data.data
    },
    async getVideoInfo () {
      const res = await getVideo(this.id)
      if (res.data.code !== 200) return this.$message.error('获取视频信息失败')
      // console.log(res)
      this.videoInfo = res.data.data
    },
    toVideo (id) {
      this.$router.push(`/videoDetail/${id}`)
    }
  },
  watch: {
    id: {
      immediate: true,
      handler (newVal) {
        this.showVideo()
        this.showVideoInfo()
        this.showRelatedVideo()
        this.getVideoInfo()
        this.queryInfo.id = newVal
      }
    }
  },
  props: ['id']
}
</script>

<style lang="less" scoped>
.vd {
  justify-content: space-around;
}
.main-box {
  video {
    // width: 640px;
    // height: 360px;
    // 16:9
    width: 800px;
    height: auto;
    max-height: 450px;
  }
}
.info-container {
  text-align: left;
}
.creator-info {
  align-content: center;
  span {
    margin-left: 10px;
    height: 50px;
    line-height: 50px;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.right-box {
  width: 400px;
  text-align: left;
}
.related {
  img {
    width: 140px;
    height: 83px;
  }
}
.r-video-title {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.r-video-creator {
  color: rgb(159, 159, 159);
}
@media screen and (max-width: 1283px){
  .right-box {
    display: none;
  }
}
</style>
